import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { actionCreators } from './store';
import './style.scss';
import { obtainCourseApply} from '../../.../../../../config/api'
class courseReferral extends PureComponent {
    constructor (props) {
        super(props)
        this.state = {
            courseCheckIndex: null
        };
    }
    render() {
        const { banner_img , courseFlag } = this.props;
        return (
            <div>
                <div className="container">
                    <div className="banner">
                        <img src={banner_img} alt="" />
                    </div>
                    <div className="nav">
                        <span onClick={this.switchWrap.bind(this,false)}>课程介绍</span>
                        <span onClick={this.switchWrap.bind(this,true)}>可选内容</span>
                        <div className={courseFlag === true ? 'active' : ''}></div>
                    </div>
                    <div className="description">
                        {/* 课程介绍图代码 */}
                        {this.courseDescImgHtml()}
                        {/* 可报课程列表 */}
                        {this.courseListHtml()}
                        {/* 报名按钮 */}
                        <div className="fixed-tab">
                            <div className="tab-item" onClick={this.handlerQrCodeShow.bind(this,true)}>
                                <img src="http://mobuz-mp.cdn.bcebos.com/matter/contact_customer_service@2x.png" alt="悦器社"/>
                            </div>
                            <div className="tab-item" onClick={this.joninCourse.bind(this)}>
                                <img src="http://mobuz-mp.cdn.bcebos.com/matter/join_now@2x.png" alt="悦器社"/>
                            </div>
                        </div>
                    </div>
                </div>
                {this.qrCodeShowHtml()}
                
            </div>
        )
    }
    // 课程介绍图代码
    courseDescImgHtml () {
        const { courseFlag ,course_description} = this.props;
        if (!courseFlag) {
            return (
                <div className="course-desc-img" v-if="!courseFlag">
                    <img src={course_description} alt=""/>
                </div>
            )
        }
    }
    // 可报课程列表
    courseListHtml () {
        const { courseFlag , course_List , courseCheckIndex} = this.props;
        if (courseFlag) {
            return (
                <div className="course-list">
                    {
                        course_List.map((item,index) => {
                            if (item.batch_state !== 2) {
                                return (
                                    <div key={JSON.stringify(item)} className={courseCheckIndex === index ? 'active':''}  onClick={this.handlerClickCourseCheckIndex.bind(this,index)}>
                                        <img src={item.batch_image !== null ? item.batch_image : item.type_referral} alt=""/>
                                        <div className="apply-num">
                                            {
                                               (item.max_sum - item.apply_sum) >= 0 ? 
                                               (
                                                <div>
                                                    <span>剩余</span>
                                                    <span className="num">{item.max_sum - item.apply_sum}</span>
                                                    <span>人</span>
                                                </div>
                                               ) :  
                                               (
                                               <div v-else>已报满</div>
                                               )
                                            }
                                        </div>
                                    </div>
                                )
                            } else {
                                return item;
                            }
                        })
                    }
                </div>
            )
        }
    }
    // 客服二维码代码
    qrCodeShowHtml () {
        const { qrCodeShow , qrCodeImg } = this.props;
        if (qrCodeShow) {
            return (
                <div className="qr_code">
                    <div className="mask" onClick={this.handlerQrCodeShow.bind(this,false)}></div>
                    <div className="code">
                        <span  onClick={this.handlerQrCodeShow.bind(this,false)}>
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/share_mp_close_ btn.png" alt=""/>
                        </span>
                        <p>扫描图片</p>
                        <p>添加客服</p>
                        <div className="img">
                            <img src={qrCodeImg} alt=""/>
                        </div>
                    </div>
                </div>
            )
        }
    }
    // 切换页面
    switchWrap (state) {
        // this.props.courseFlag = false; courseCheckIndex = null
        this.props.updateWrapSwitchStatus(state);
    }
    // 选择课程
    handlerClickCourseCheckIndex (index) {
        this.props.handlerClickCourseCheck(index);
    }
    // 课程二维码显示
    handlerQrCodeShow (state) {
        this.props.handlerQrCodeShow(state);
    }
    // 加入课程
    async joninCourse () {
        const {courseCheckIndex , course_List} = this.props;
        // 没有选择课程内容
        if (courseCheckIndex === null) {
            this.courseFlage = true;
            return false;
        };
        // 选中的的课程
        let course = course_List[courseCheckIndex];  
        // 已报满
        if (course.max_sum <= course.apply_sum) {
            alert('当前课程已报满');
            return false;
        };
        // 报名截止
        // 一天的时间戳
        let day = 60 * 60 * 24 * 1000;
        let now = new Date().getTime();
        let end  = (course.end_time-0) + day; // 比如今天23号，到23号晚上12点之前，都可以报名
        if (end < now) {
            alert('当前课程已截止报名')
            return false;
        };
        // 跳转支付界面
        let batch_id = course.batch_id;
        // let type_id = course.type_id;
        let open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w';
		// const batch_id = '20190211045'
		// const student_id = '20190211045001'
        let union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk';
        // 校验报名情况
        let data = await obtainCourseApply(batch_id, open_id, union_id)
        if (data.status === 200) {
            // TODO 付款页链接未加
            this.props.history.push('/courseReferral/2')
        } else if (data.status === 500) {
            alert(data.msg)
            this.props.acquireCourseReferral();
        }
    }
    componentDidMount() {
        console.log(this.props)
		this.props.acquireCourseReferral();
	}
}
const mapState = (state) => ({
    wrapSwitchStatus: state.courseReferral.wrapSwitchStatus,
    banner_img: state.courseReferral.banner_img,
    course_description: state.courseReferral.course_description,
    course_List: state.courseReferral.course_List,
    courseFlag: state.courseReferral.courseFlag,
    courseCheckIndex: state.courseReferral.courseCheckIndex,
    qrCodeShow: state.courseReferral.qrCodeShow,
    qrCodeImg: state.courseReferral.qrCodeImg,
    
});

const mapDispatch = (dispatch) => ({
	acquireCourseReferral() {
		const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		// const batch_id = '20190211045'
		// const student_id = '20190211045001'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
		dispatch(actionCreators.acquireCourseReferral( open_id, union_id ));
    },
    // 切换页面
	updateWrapSwitchStatus(status) {
		dispatch(actionCreators.updateWrapSwitchStatus(status));
    },
    // 选择课程
	handlerClickCourseCheck(index) {
		dispatch(actionCreators.handlerClickCourseCheck(index));
    },
    // 客服二维码显示
	handlerQrCodeShow(state) {
		dispatch(actionCreators.handlerQrCodeShow(state));
    },
    // 获取报名人数
	acquireCourseApply(batch_id, open_id, union_id) {
		dispatch(actionCreators.acquireCourseApply(batch_id, open_id, union_id));
    }
    
    
});
export default connect(mapState, mapDispatch)(withRouter(courseReferral));